<template>
	<view>

		<!-- 	搜索栏 -->
		<view>
			<view class="flex align-center bg-white">
				<view>
					<image src="/static/logo.svg" class="logo"></image>
				</view>
				<view class="flex padding-xs basis-xl radius  align-center margin-lg solids">
					<view><input /></view>
					<view class="cuIcon-search"></view>
				</view>
				<view>
					<image src="../../static/discover_image/scan.png" class="cu-avatar round margin-sm" @tap="scan">
					</image>
				</view>
			</view>
		</view>

		<!------------------------------------- 分割线 ------------------------------------------------------------------------------------------------------------------->
		<!-- 导航栏 -->
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in goods" :key="index"
				@tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
		<!------------------------------------- 分割线 ------------------------------------------------------------------------------------------------------------------->
		<!--    购物左侧导航栏 -->
		<category :categoryList="categoryList" :subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
			@categorySubClick="categorySubClick"></category>
	</view>
</template>



<script>
	import category from "../../components/qiyue-category/qiyue-category.vue"
	export default {
		components: {
			category
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				categoryList: [],
				subCategoryList: [],
				goods: [{
						"name": "计算",
						"detail": [{
								"name": "计算分类1",
								"subCategoryList": [{
										"name": "计算商品1-1",
										"logo": "../../static/discover_image/goods.png"
									},
									{
										"name": "计算商品1-2",
										"logo": "../../static/discover_image/goods.png"
									}
								],
							},
							{
								"name": "计算分类2",
								"subCategoryList": [{
										"name": "计算商品2-1",
										"logo": "../../static/discover_image/goods.png"
									},
									{
										"name": "计算商品2-2",
										"logo": "../../static/discover_image/goods.png"
									}
								],
							}
						]

					},
					{
						"name": "存储",
						"detail": [{
								"name": "存储分类1",
								"subCategoryList": [{
										"name": "存储商品1-1",
										"logo": "../../static/discover_image/goods.png"
									},
									{
										"name": "存储商品1-2",
										"logo": "../../static/discover_image/goods.png"
									}
								],
							},
							{
								"name": "存储分类2",
								"subCategoryList": [{
										"name": "存储商品2-1",
										"logo": "../../static/discover_image/goods.png"
									},
									{
										"name": "存储商品2-2",
										"logo": "../../static/discover_image/goods.png"
									}
								],
							}
						]
					}
					// "计算", "存储", "数据库", "网络与CDN", "视频", "容器与中间件", "安全与管理", "大数据", "人工智能", "企业应用", "物联网", "专属云", "混合云",
					// "省份专属", "创新能力专区"
				],



			};
		},

		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id)
				this.categoryList = this.goods[e.currentTarget.dataset.id].detail
				this.subCategoryList = this.categoryList[0].subCategoryList;
			},

			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			scan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			categoryMainClick(category) {
				this.subCategoryList = category.subCategoryList;
			},
			categorySubClick(category) {
				console.log(category);
			}
		},
		mounted() {
			this.categoryList = this.goods[0].detail

			this.subCategoryList = this.categoryList[0].subCategoryList;
		}

	}
</script>

<style>
	.myavatar {
		width: 100rpx;
		height: 100rpx;
	}

	.logo {
		width: 200rpx;
		height: 175rpx;
	}
</style>